<template>
    <!-- 主容器 -->
    <div class="news-container">
      <!-- 左侧新闻列表区域 -->
      <div class="news-list">
        <h1>新闻列表</h1> <!-- 标题 -->
        <ul>
          <!-- 循环渲染新闻列表 -->
          <li v-for="news in newsList" :key="news.id">
            <!-- 路由链接到新闻详情页，此路由定义在后续介绍 -->
            <router-link :to="{
    name: 'newsdetails',  // 使用命名路由导航
    query: { id: news.id,abc:news.title  } 
    // 通过query传递新闻ID参数
  }">
              {{ news.title }}
            </router-link>
          </li>
        </ul>
      </div>
  
      <!-- 右侧新闻详情区域 -->
      <div class="news-detail">
        <!-- 嵌套路由出口（显示子路由内容） -->
        <router-view></router-view>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  // 导入新闻数据
  import { newsList } from '@/data/newsData.ts'
  </script>
  
  <style scoped>
  /* 整体布局：左右排列 */
  .news-container {
    display: flex;
    gap: 20px;
    padding: 20px;
  }
  
  /* 左侧新闻列表 */
  .news-list {
    width: 30%;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .news-list h1 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .news-list ul {
    list-style: none;
    padding: 0;
  }
  
  .news-list li {
    margin-bottom: 10px;
  }
  
  .news-list a {
    text-decoration: none;
    color: #0073e6;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .news-list a:hover {
    color: #005bb5;
    text-decoration: underline;
  }
  
  /* 右侧新闻详情 */
  .news-detail {
    width: 70%;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  }
  </style>